<template>
  <view>
    <view class="bg-white" style="width: 100%; position: fixed; top: 0; z-index: 999;"
          :style="'height:'+custom_bar+'px'"></view>
    <view id="search" class="cu-bar search bg-white fixed" style="width: 100%; border: none; margin-bottom: 48upx;" :style="'top:'+custom_bar+'px'">
      <view class="action">
        <image src="/static/icon/detail/fanhui-2@2x.png" style="width: 24upx; height: 40upx;" @click="handleToIndex()"></image>
      </view>
      <view class="search-form round">
        <image src="/static/icon/index/sousuo@2x.png" style="width: 26upx; height: 30upx; margin: 0 22upx;"></image>
        <input :adjust-position="false" type="text" placeholder="搜索" placeholder-style="color: #D8D8D8;" v-model="search_word"
               confirm-type="search" style="font-size: 28upx; line-height: 20px !important;"
               @input="handleSearchResult(search_word)"/>
      </view>
      <view class="action">
        <view style="color: #333333; font-size: 28upx;" @click="handleSearchResult('')">取消</view>
      </view>
    </view>
    <!-- 占搜索位-->
    <view style="width: 100%;"  :style="'height: '+search_height+'px'"></view>
    <view style="width: 100%; height: 140upx; padding: 0 20upx;" v-if="show_flag">
      <view v-if="attention_list.length > 0" @click="handleToMyHomePage(item.attention_user)" class="flex align-center justify-between"
            style="width: 100%; height: 140upx; border-bottom: 2upx solid #F8F8F8;"
            v-for="(item, index) in attention_list" :key="index">
        <view class="flex align-center">
          <image :src="item.attention_user.avatar" mode="aspectFill"
                 style="width: 80upx; height: 80upx; border-radius: 50%; margin-right: 10upx;"
                 v-if="item.attention_user"></image>
          <view style="font-size: 28upx; color: #333333; font-weight: bold;" v-if="item.attention_user">
            {{ item.attention_user.nick_name }}
          </view>
        </view>
        <view v-if="item.attention_user" class="flex justify-center align-center followed" @click.stop="handleCancelAttention(index, item.attention_user.id)">
          已关注
        </view>
      </view>
      <view v-if="!attention_list.length" class="justify-center align-center" style="width: 100%; padding: 50% 0; flex-direction: column; text-align: center;">
        <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
        <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
      </view>
      <view class="flex align-center justify-center"
            v-if="attention_list.length >= 15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="is_load?'over':'loading'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
<!--    <view class="justify-center align-center" style="width: 100%; padding: 50% 0; flex-direction: column; text-align: center;">-->
<!--      <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>-->
<!--      <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>-->
<!--    </view>-->
  </view>
</template>

<script>
import {attention_getListByCon, attention_giveAttention} from 'api/attention/attention'

export default {
  data() {
    return {
      custom_bar: 0, //通知栏高度
      search_height: 0, //搜索框高度
      bottom_flag: true, //触底标识
      page: 1, //分页
      attention_list: [], //关注列表
      is_load: true, //加载
      show_flag: false,
      attention_flag: false, //关注模态框
      search_word: '' ,//搜索关键词
    }
  },
  methods: {
    pageInit(page, search_word, type) {
      let user_info = uni.getStorageSync('user_info');
      attention_getListByCon({page, search_word, user_id: user_info.id}).then(res => {
        if(type){
          this.attention_list = [];
        }
        let temp_data = res.data.data;
        if(!temp_data.length){
          this.bottom_flag = false;
        }else {
          temp_data.forEach(item => {
            this.attention_list.push(item);
          })
        }
        this.is_load = false;
        this.show_flag = true;
      })
    },
    //去首页
    handleToIndex(){
      uni.navigateBack({
        delta: 1
      });
    },
    //去个人主页
    handleToMyHomePage(attention_user) {
      this.$uniNavigateTo({
        url: '/pages/my/homePage/homePage',
        query:{
          account_user_id: attention_user.id
        }
      })
    },
    //取消关注
    handleCancelAttention(index, f_id) {
      attention_giveAttention({f_table: 'account_user', f_id}).then(res => {
        this.attention_list.splice(index, 1);
      })
    },
    //搜索结果
    handleSearchResult(search_word){
      if(this.search_word){
        this.search_word = search_word;
        this.pageInit(1,search_word, 1)
      }
    },
  },
  onShow() {
    this.pageInit(1, this.search_word, 1);
  },
  mounted() {
    this.custom_bar = uni.getStorageSync('system_info').statusBarHeight;
    const query = uni.createSelectorQuery().in(this);
    query.select('#search').boundingClientRect(data => {
      this.search_height = data.height + this.custom_bar;
    }).exec();
  },
  //搜索框变化
  onNavigationBarSearchInputChanged(e){
    this.search_word = e.text;
  },
  //确认搜索
  onNavigationBarSearchInputConfirmed(e){
    this.search_word = e.text;
      this.attention_list = [];
      this.pageInit(1,this.search_word)
  },
  //上拉加载
  onReachBottom() {
    if(this.bottom_flag){
      this.page+=1;
      this.pageInit(this.page);
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.bottom_flag = true;
    this.pageInit(1, this.search_word, 1);
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
/deep/ .cu-bar {
  height: 130upx;
}

/deep/ .cu-bar.fixed, .nav.fixed {
  box-shadow: none;
}

/deep/ .cu-bar .search-form {
  width: 532upx !important;
  height: 70upx;
  border: 2upx solid #EDEDED;
  background-color: white;
}

.followed {
  width: 140upx;
  height: 64upx;
  border-radius: 40upx;
  border: 1px solid #E52718;
  font-weight: bold;
  font-size: 28upx;
  color: #E52718;
}
</style>
